import React, { Component } from 'react'
import { NavBar, Icon, Carousel, WingBlank, Toast } from 'antd-mobile';
import myaxios from "../../utils/myaxios";
import './GoodDetail.scss'

export default class GoodDetail extends Component {
    constructor(props) {
        super(props);
        // console.log(props);
    }

    componentDidMount() {
        let { goods_id } = this.props.match.params;
        // console.log(this.props.match.params);
        myaxios.get('goods/detail', {
            params: {
                goods_id
            }
        }).then((res) => {
            console.log(res);
            this.setState({
                goods_info: res
            })
        }).catch((err) => {
            console.log(err);
        })

    }
    shoucangclick = () => {
        let collections_str = localStorage.getItem('collections');
        let collections = JSON.parse(collections_str || '[]');
        let index = collections.findIndex((v) => {
            if (v.goods_id == this.state.goods_info.goods_id) {
                //这里的v就是this.state.goods_info
                return true
            }
        })
        if (index != -1) {
            collections.splice(index, 1)
            Toast.info('取消收藏成功', 1);
            this.setState({
                showCollect: false
            })
        } else {
            collections.push(this.state.goods_info)
            Toast.info('收藏成功', 1);
            this.setState({
                showCollect: true
            })

        }
        localStorage.setItem('collections', JSON.stringify(collections))

    }
    gotocart = () => {
        this.props.history.push('/cart')
    }
    state = {
        data: ['1', '2', '3'],
        goods_info: [],
        showCollect: false
    }
    addcart = () => {
        let carts_str = localStorage.getItem('cart');
        let carts = JSON.parse(carts_str || '[]')
        let { goods_id } = this.props.match.params
        let index = carts.findIndex((v) => {
            if (v.goods_id ==goods_id){
                return true
            }
        })
        if(index!=-1){
            carts[index].num++
        }else{
            let goods_info=this.state.goods_info
            goods_info.num=1;
            goods_info.checked=true;
            carts.push(goods_info)
        }
        Toast.info("加入购物车成功",1);
        localStorage.setItem('carts', JSON.stringify(carts))
    }
    render() {
        return (
            <div className='yg-GoodDetail'>
                <div className='yg-nav-bar'>
                    <NavBar
                        className='nav-bar'
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => {
                            window.history.go(-1)
                        }}
                    >商品详情</NavBar>
                </div>
                <div className='yg-detail-swiper'>
                    <Carousel
                        autoplay={true}
                        infinite
                    >
                        {this.state.goods_info.pics && this.state.goods_info.pics.map(val => (
                            <div
                                key={val.goods_id}
                                className="imageWrapper"
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    src={val.pics_mid}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </div>
                        ))}
                    </Carousel>
                </div>
                <div className='yg-detail-price'>
                    <div className='price-left'>
                        <span>￥</span>
                        <span>168</span>
                    </div>
                    <div className='price-right'>
                        <i className="iconfont icon-fenxiang" ></i>
                        <i className={this.state.showCollect ? "iconfont icon-shoucang active" : "iconfont icon-shoucang"} onClick={this.shoucangclick}></i>
                    </div>


                </div>
                <div className="yg-detail-tiele">
                    {this.state.goods_info.goods_name}

                </div>
                <div className="yg-detail-richtext">
                    <div className="detail-richtext-title">图文详情</div>
                    <div className="detail-richtext-content" dangerouslySetInnerHTML={{ __html: this.state.goods_info.goods_introduce }}></div>

                </div>
                <div className="yg-detail-tabber">
                    <div className='tabber-kefu'>
                        <i className="iconfont icon-kefu"></i>
                        <div className="title">客服人员</div>

                    </div>
                    <div className='tabber-gouwuche' onClick={this.gotocart}>
                        <i className="iconfont icon-icon-"></i>
                        <div className="title">购物车</div>

                    </div>
                    <div className="addcart" onClick={this.addcart}>
                        <span className='title2' >加入购物车</span>
                    </div>
                    <div className="gopay">
                        <span className='title2'>立即购买</span>

                    </div>

                </div>
            </div>
        )
    }
}
